<template>
    <div style="padding-bottom: 42px">

        <!-- 干系人 -->
        <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">干系人</span>
            <van-button v-if="bgEditable" block type="primary" style="display: inline-block;width:auto;height: 33px;"
                native-type="button" @click="stakeholderHandleAppend()">新增</van-button>
        </div>
        <el-table :data="mFromdata.stakeholder" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="stakeholderOrg" label="单位" width="120" />
            <el-table-column prop="stakeholderCode" label="账号" width="120" />
            <el-table-column prop="stakeholderName" label="姓名" />
            <el-table-column prop="stakeholderTel" label="电话" width="120" />
            <el-table-column prop="stakeholderEmail" label="邮箱" width="150" />
            <el-table-column prop="stakeholderRole" label="角色" width="120" />
            <el-table-column prop="stakeholderDuty" label="职责" width="120" />
            <el-table-column v-if="bgEditable" label="操作" width="150">


                <!-- slot-scope="scope" //取到当前单元格 
                scope.$index //拿到当前行的index
                scope.row //拿到当前行的数据对象 -->
                <template slot-scope="scope">
                    <div style="white-space: nowrap; display: inline-block">
                        <el-button type="primary" size="small"
                            @click="stakeholderHandleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small"
                            @click="stakeholderHandleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <!-- 合同信息 -->
        <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">合同信息</span>
        </div>
        <el-table :data="mFromdata.contractInfo" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="contractIncExpType" label="收支合同类型" />
            <el-table-column prop="retroactive" label="是否补充协议" width="120" />
            <el-table-column prop="contractNo" label="合同编号" width="120" />
            <el-table-column prop="contractName" label="合同名称" width="200" />
            <el-table-column prop="contractExecutorName" label="主执行人姓名" />
            <el-table-column prop="contractSignedDate" label="合同生效时间" width="110" />
            <el-table-column prop="contractStatraDate" label="履行开始时间" width="110" />
            <el-table-column prop="contractEndDate" label="履行结束时间" width="110" />
            <el-table-column prop="createdTime" label="合同信息拉取时间" width="110" />
            <el-table-column prop="contractSignedDate" label="签章时间" width="110" />
            <el-table-column prop="contractPartyA" label="合同甲方" width="110" />
            <el-table-column prop="contractPartyB" label="合同乙方" width="110" />
            <el-table-column prop="projectDuration" label="项目年限(年)" width="110" />
            <el-table-column prop="contractAmountUppercase" label="合同总金额(不含税)" width="110" />
            <el-table-column prop="contractAmountLowercase" label="合同总金额(不含税)" width="110" />
            <el-table-column prop="personPartyA" label="甲方负责人(法定代表人)" width="110" />
            <el-table-column prop="personPartyB" label="乙方负责人(法定代表人)" width="110" />
            <el-table-column prop="contractTaxAmountUppercase" label="合同总金额(含税)" width="110" />
            <el-table-column prop="amountTax" label="合同总金额(含税)" width="110" />
            <el-table-column prop="contractValidity" label="合同有效期(年)" width="110" />
        </el-table>


        <!-- 拆分表 -->
        <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">拆分表</span>
        </div>
        <el-table show-summary :summary-method="getSummaries" :data="mFromdata.incomeModelList" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="contractSerialNumber" label="合同流水号" width="110" />
            <el-table-column prop="contractNo" label="合同编号" width="110" />
            <el-table-column prop="contractType" label="合同类型" />
            <el-table-column prop="splitBusinessType" label="业务大类" width="110" />
            <el-table-column prop="splitSujectName" label="科目名称" width="200" />
            <el-table-column prop="splitSujectCode" label="科目代码" />
            <el-table-column prop="splitIncludedAmount" label="含税总金额（元）" />
            <el-table-column prop="splitNoAmount" label="不含税总金额（元）" width="110" />
            <el-table-column prop="splitTaxAmount" label="税额（元）" />
            <el-table-column prop="billingTime" label="计费时长(月)" />
            <el-table-column prop="splitStartDate" label="预计计费起始日期" width="120" />
            <el-table-column prop="splitEndDate" label="预计计费结束日期" width="120" />
            <el-table-column prop="contractPaymentStage" label="合同约定收/付款阶段" width="120" />
        </el-table>


        <!-- 合同交付进度计划 -->
        <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">合同交付进度计划</span>
        </div>
        <el-table :data="mFromdata.contractDeliveryInfo" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="contractSerialNumber" label="合同流水号" width="110" />
            <el-table-column prop="contractNo" label="合同编号" width="110" />
            <el-table-column prop="contractType" label="合同类型" />
            <el-table-column prop="deliveryPhase" label="合同约定交付阶段" />
            <el-table-column prop="contractSchedule" label="合同正文进度条款" width="300" />
            <el-table-column prop="deliveryDate" label="合同计划交付年月" width="120" />
            <el-table-column prop="contractArrangePayTime" label="合同约定交付时间" width="120" />
            <el-table-column prop="contractDeadline" label="合同工期要求(天)" />
            <el-table-column prop="rests" label="其他" width="200" />
            <el-table-column v-if="bgEditable" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small"
                        @click="contractDeliveryInfoHandleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
      <!-- 合同付款计划 -->
      <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
        <div class="blue_item"></div>
        <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">合同付款计划</span>
      </div>
      <el-table show-summary :summary-method="getSummaries2" :data="contractReceiptInfo_outcome" border style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="contractSerialNumber" label="合同流水号" width="150" />
        <el-table-column prop="contractNo" label="合同编号" width="110" />
        <el-table-column prop="contractType" label="合同类型" width="110" />
        <el-table-column prop="paymentStage" label="付款阶段" />
        <el-table-column prop="paymentRatio" label="付款比例(%)" width="100" />
        <el-table-column prop="paymentLimit" label="付款额度(元、含税)" width="110" />
        <el-table-column prop="contractTerms" label="合同正文付款条款" width="300" />
        <el-table-column prop="advanceDate" label="预计付款日期" width="120" />
        <el-table-column prop="rests" label="其他" width="200" />
      </el-table>

        <!-- 合同收款计划 -->
        <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">合同收款计划</span>
        </div>
        <el-table show-summary :summary-method="getSummaries3" :data="contractReceiptInfo_income" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="contractSerialNumber" label="合同流水号" width="150" />
            <el-table-column prop="contractNo" label="合同编号" width="110" />
            <el-table-column prop="contractType" label="合同类型" width="110" />
            <el-table-column prop="paymentStage" label="收款阶段" />
            <el-table-column prop="paymentRatio" label="收款比例(%)" width="100" />
            <el-table-column prop="paymentLimit" label="收款额度(元、含税)" width="110" />
            <el-table-column prop="contractTerms" label="合同正文收款条款" width="300" />
            <el-table-column prop="advanceDate" label="预计收款日期" width="120" />
            <el-table-column prop="rests" label="其他" width="200" />
        </el-table>


        <!-- 合作伙伴 -->
        <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">合作伙伴</span>
            <van-button v-if="bgEditable" block type="primary" style="display: inline-block;width:auto;height: 33px;"
                native-type="button" @click="partnerInfoHandleAppend()">新增</van-button>
        </div>
        <el-table :data="mFromdata.partnerInfo" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="partnerWarehouseId" label="合作伙伴编码" />
            <el-table-column prop="partnerName" label="合作伙伴名称" />
            <el-table-column prop="partnerContactPerson" label="合作伙伴联系人" />
            <el-table-column prop="partnerContact" label="合作伙伴联系方式" width="130" />
            <el-table-column prop="partnerSelectionTime" label="合作伙伴甄选时间" width="110" />
            <el-table-column prop="purchaseName" label="采购名称" />
            <el-table-column v-if="bgEditable" label="操作" width="150">
                <template slot-scope="scope">
                    <div style="white-space: nowrap; display: inline-block">
                        <el-button type="primary" size="small"
                            @click="partnerInfoHandleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small"
                            @click="partnerInfoHandleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <!-- 采购清单 -->
        <div class="mt10" style="display: flex; border-bottom: 1px solid #ebedf0">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px; margin-left: 5px; flex: 1">采购清单</span>
        </div>
        <el-table :data="mFromdata.purchaseCatalogue" border style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="purchaseClassify" label="采购目录类型" width="110" />
            <el-table-column prop="purchaseProduct" label="采购产品" />
            <el-table-column prop="purchaseLevel" label="采购级别" />
            <el-table-column prop="purchaseSpecifications" label="规格型号" />
            <el-table-column prop="purchaseQuantity" label="采购数量" />
            <el-table-column prop="purchaseMeasureUnit" label="计量单位" />
        </el-table>

    </div>
</template>
 
<script>
import { Dialog } from 'vant';


export default {
    data() {
        return {
            contractReceiptInfo_income:[],
            contractReceiptInfo_outcome:[],
            isAppend:false,     //是否新增 或编辑
            pushAppendKey:'',
            pushAppendIndex:0,
        }
    },

    props: ['params', 'mFromdata'],
    created() {
      for (var i in this.mFromdata.contractReceiptInfo) {
        var item = this.mFromdata.contractReceiptInfo[i];
        if (item.contractType == "支出合同") {
          this.contractReceiptInfo_outcome.push(item);
        } else if (item.contractType == "收入合同") {
          this.contractReceiptInfo_income.push(item);
        }
      }
    },
  activated() {
        if (this.bgEditable) {
            let bgInfo = JSON.parse(localStorage.getItem(this.pushAppendKey));
            if (bgInfo === null || bgInfo === undefined) {
                return
            }
            let length = Object.keys(bgInfo).length;
            if (bgInfo != '{}' && length > 0) {
                localStorage.setItem(this.pushAppendKey, '{}')
                if (this.mFromdata[this.pushAppendKey] === null || 
                    this.mFromdata[this.pushAppendKey] === undefined) {
                    this.mFromdata[this.pushAppendKey] = [];
                }
                if (this.isAppend) {
                    this.mFromdata[this.pushAppendKey].push(bgInfo);
                }
                else {
                    this.$set(this.mFromdata[this.pushAppendKey], this.pushAppendIndex, bgInfo);
                }
                this.isAppend = false;
            }
        }
    },

    methods: {
      getSummaries2(param) {
        // 计算小计
        let result = this.contractReceiptInfo_outcome
        let comeData = {"paymentLimit":0}
        result.forEach((item) => {
          comeData.paymentLimit += Number(item.paymentLimit)
        })

        return [
          <span>
            <strong> 合计 </strong>
          </span>,
          <span> </span>,
          <span> </span>,
          <span> </span>,
          <span> </span>,
          <span> {comeData.paymentLimit} </span>
        ]
      },
      getSummaries3(param) {
        // 计算小计
        let result = this.contractReceiptInfo_income
        let comeData = {"paymentLimit":0}
        result.forEach((item) => {
          comeData.paymentLimit += Number(item.paymentLimit)
        })

        return [
          <span>
            <strong> 合计 </strong>
          </span>,
          <span> </span>,
          <span> </span>,
          <span> </span>,
          <span> </span>,
          <span> {comeData.paymentLimit} </span>
        ]
      },
      getSummaries(param) {
          // 计算小计
          let result = this.mFromdata.incomeModelList
          let incomeData = {"splitIncludedAmount":0,"splitNoAmount":0,"splitTaxAmount":0}
          let outcomeData = {"splitIncludedAmount":0,"splitNoAmount":0,"splitTaxAmount":0}
          result.forEach((item) => {
            if (item.contractType.includes("收入")){
              incomeData.splitIncludedAmount += Number(item.splitIncludedAmount)
              incomeData.splitNoAmount += Number(item.splitNoAmount)
              incomeData.splitTaxAmount += Number(item.splitTaxAmount)
            }else{
              outcomeData.splitIncludedAmount += Number(item.splitIncludedAmount)
              outcomeData.splitNoAmount += Number(item.splitNoAmount)
              outcomeData.splitTaxAmount += Number(item.splitTaxAmount)
            }
          })

          return [
          <span>
            <strong> 收入合计 </strong>
            <br />
            <strong> 支出合计 </strong>
          </span>,
          <span> </span>,
          <span> </span>,
          <span> </span>,
          <span> </span>,
          <span> </span>,
          <span>
            <span> {incomeData.splitIncludedAmount} </span> <br />
            <span> {outcomeData.splitIncludedAmount} </span>
          </span>,
          <span>
            <span> {incomeData.splitNoAmount} </span> <br />
            <span> {outcomeData.splitNoAmount} </span>
          </span>,
          <span>
            <span> {incomeData.splitTaxAmount} </span> <br />
            <span> {outcomeData.splitTaxAmount} </span>
          </span>
          ]
        },

      stakeholderHandleDelete(index, row) {

            Dialog.confirm({
                title: '提示',
                message: '确定删除吗？',
            }).then(() => {
                this.mFromdata.stakeholder.splice(index, 1);
            });
        },

        stakeholderHandleEdit(index, row) {
            
            this.isAppend = false;
            this.pushAppendKey = 'stakeholder';
            this.pushAppendIndex = index;
            this.pushAppendView(row);
        },

        stakeholderHandleAppend() {

            this.isAppend = true;
            this.pushAppendKey = 'stakeholder';
            this.pushAppendIndex = 0;
            this.pushAppendView();
        },



        partnerInfoHandleDelete(index, row) {
            Dialog.confirm({
                title: '提示',
                message: '确定删除吗？',
            }).then(() => {
                this.mFromdata.partnerInfo.splice(index, 1);
            });
        },

        partnerInfoHandleEdit(index, row) {
            
            this.isAppend = false;
            this.pushAppendKey = 'partnerInfo';
            this.pushAppendIndex = index;
            this.pushAppendView(row);
        },

        partnerInfoHandleAppend() {

            this.isAppend = true;
            this.pushAppendKey = 'partnerInfo';
            this.pushAppendIndex = 0;
            this.pushAppendView();
        },


        contractDeliveryInfoHandleEdit(index, row) {

            this.isAppend = false;
            this.pushAppendKey = 'contractDeliveryInfo';
            this.pushAppendIndex = index;
            this.pushAppendView(row);
        },


        pushAppendView(data) {

            if (data == null || data == undefined) {
                data = {};
            }

            this.$router.push({
                name: "xmjj_dqtx_push",
                query: {
                    title:'qqq',
                    pushType: this.pushAppendKey,
                    isDrawup: '1',
                    formData: data,
                },
            });
        },
    },
    computed: {
        
        bgEditable() {
            return this.params.location === 'dict.start' || this.params.isDrawup == '1';
        },

    },
    components: {
       
    },
}
</script>
 

<style>




</style>
